import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import '../../scss/lwl/landlord.css'
import { Toast, NavBar,Button } from 'react-vant';
import { useSearchParams } from 'react-router-dom';
import { Contact, Certificate } from '@react-vant/icons';
import axios from 'axios'
export default function Lwl_LandLord() {
    const jump = useNavigate()
    const [params] = useSearchParams()
    const [landlord, setLord] = useState([])
    const [house,setHouse]=useState([])
    const getLord = async () => {
        let { data: { landlord } } = await axios.get('http://localhost:3000/landlord')
        setLord(landlord)
    }
    const getHouse=async()=>{
        let {data:{house}}=await axios.get('http://localhost:3000/house')
        setHouse(house)
    }
    useEffect(() => {
        getLord()
        getHouse()
    }, [])
    return (
        <div id='landlord_all'>
            <NavBar
                title="业主/经纪"
                onClickLeft={() => { jump(-1) }}
                onClickRight={() => Toast('按钮')}
            />
            <div id="landlord_list">
                {landlord.filter(p => p._id === params.get('id')).map(item => (
                    <>
                        <div id="landlord_photo">
                            <img src="./酒店7.webp" alt="" />

                        </div>
                        <div id="landlord_message">
                            <h2>{item.name}</h2>
                            <span>个人房东</span>
                        </div>
                        <div id="landlord_star">
                            <span>信用良好 70分</span>
                        </div>
                    </>
                ))}

            </div>
            <div id="real_name">
                <div id="rname">
                    <div className='rname1'>
                        <Contact />
                    </div>
                    <div className='rname2'>
                        <h3>实名认证</h3>
                        <p>人脸已认证</p>
                    </div>
                    <div className='rname3'>
                        <span>已认证</span>
                    </div>
                </div>
                <div id="response">
                    <div className='res1'>
                        <Certificate />
                    </div>
                    <div className='res2'>
                        <h3>响应率</h3>
                        <p>电话响应率50% 微聊回复率100%</p>
                    </div>
                    <div className='res3'>
                        <span>极快</span>
                    </div>
                </div>
            </div>
            <h2>TA的房源</h2>
            <div id="landlord_house">
                {house.filter(ele=>ele.lid===params.get('id')).map(item=>(
                    <>
                    <div className='houselist' key={item._id}>
                        <div className='house_img'>
                            <img src="./酒店7.webp" alt="" />
                        </div>   
                        <div className="house_message">
                            <h3>{item.classfy}|实图真价 福田金地大百汇....</h3>
                            <p>{item.house_type}·{item.house_area}m²·{item.name}·{item.plot}</p>
                            <h2 style={{marginTop:'20px'}}><span style={{color:'orange'}}>{item.price}元/月</span>
                                <span style={{float:'right',fontSize:'13px'}}>1天前</span>
                            </h2>
                        </div>  
                    </div>
                    
                    </>
                ))}
            </div>
            <div id='landlord_foot'>
                <Button type='warning'>微聊</Button>
                <Button type='danger'>电话</Button>
            </div>
        </div>
    )
}
